<template>
  <div class="filter-container">
    <el-form :inline="true" class="filter-form">
      <el-form-item label="学号">
        <el-input 
          :model-value="filters.studentId" 
          @update:model-value="updateField('studentId', $event)"
          placeholder="请输入学号" 
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input 
          :model-value="filters.name" 
          @update:model-value="updateField('name', $event)"
          placeholder="请输入姓名" 
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="队次">
        <el-select 
          :model-value="filters.classId" 
          @update:model-value="updateField('classId', $event)"
          placeholder="选择队次" 
          clearable 
          filterable>
          <el-option 
            v-for="lcClass in lcClasses" 
            :key="lcClass.id" 
            :label="lcClass.name" 
            :value="lcClass.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业">
        <el-select 
          :model-value="filters.majorId" 
          @update:model-value="updateField('majorId', $event)"
          placeholder="选择专业" 
          clearable 
          filterable>
          <el-option 
            v-for="major in majors" 
            :key="major.id" 
            :label="major.name" 
            :value="major.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业层次">
        <el-select 
          :model-value="filters.cengciId" 
          @update:model-value="updateField('cengciId', $event)"
          placeholder="选择专业层次" 
          clearable 
          filterable>
          <el-option 
            v-for="cengci in cengcis" 
            :key="cengci.id" 
            :label="cengci.name" 
            :value="cengci.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生状态">
        <el-select
          v-model="filters.statusId"
          placeholder="选择状态"
          clearable
          filterable
          @change="handleStatusChange">
          <el-option
            v-for="status in studentStatuses"
            :key="status.id"
            :label="status.name"
            :value="status.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'StudentSearchForm',
  props: {
    lcClasses: {
      type: Array,
      default: () => []
    },
    majors: {
      type: Array,
      default: () => []
    },
    cengcis: {
      type: Array,
      default: () => []
    },
    studentStatuses: {
      type: Array,
      default: () => []
    },
    modelValue: {
      type: Object,
      default: () => ({
        studentId: '',
        name: '',
        classId: '',
        majorId: '',
        cengciId: '',
        statusId: ''
      })
    }
  },
  emits: ['update:modelValue', 'search', 'reset'],
  setup(props, { emit }) {
    // 直接使用props.modelValue，通过emit来同步
    const filters = computed({
      get: () => props.modelValue,
      set: (value) => {
        emit('update:modelValue', value)
      }
    })

    // 辅助函数用于更新单个字段
    const updateField = (field, value) => {
      console.log(`[DEBUG] updateField called: field=${field}, value=${value}`)
      console.log(`[DEBUG] current props.modelValue:`, props.modelValue)
      
      // 直接更新父组件的filters对象的属性
      const newFilters = { ...props.modelValue }
      newFilters[field] = value
      
      console.log(`[DEBUG] emitting newFilters:`, newFilters)
      emit('update:modelValue', newFilters)
    }

    // 处理学生状态变化
    const handleStatusChange = (value) => {
      console.log(`[DEBUG] handleStatusChange called: value=${value}`)
      
      // 直接更新状态字段，确保实时响应
      const updatedFilters = { ...props.modelValue }
      updatedFilters.statusId = value
      
      console.log(`[DEBUG] emitting updatedFilters for status change:`, updatedFilters)
      emit('update:modelValue', updatedFilters)
      
      // 立即触发搜索，确保UI实时更新
      setTimeout(() => {
        emit('search')
      }, 0)
    }

    const handleSearch = () => {
      emit('search')
    }

    const handleReset = () => {
      const resetFilters = {
        studentId: '',
        name: '',
        classId: '',
        majorId: '',
        cengciId: '',
        statusId: ''
      }
      emit('update:modelValue', resetFilters)
      emit('reset')
    }

    return {
      filters,
      updateField,
      handleStatusChange,
      handleSearch,
      handleReset
    }
  }
}
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>